<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="org.example.service.ProductService" %>
<%@ page import="org.example.service.ProductServiceImpl" %>
<%@ page import="org.example.model.Product" %>
<%@ page import="java.util.List" %>

<%
    // 获取分类ID
    String categoryId = request.getParameter("categoryId");

    // 只在没有分类商品时才获取所有商品
    if (request.getAttribute("products") == null) {
        ProductService productService = new ProductServiceImpl();
        List<Product> products;
        
        if (categoryId != null && !categoryId.isEmpty()) {
            products = productService.getProductsByCategory(Integer.parseInt(categoryId));
            request.setAttribute("categoryName", "分类商品");
        } else {
            products = productService.getAllProducts();
        }

        request.setAttribute("products", products);
        System.out.println("加载商品，数量: " + (products != null ? products.size() : 0));
    }
%>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘乐乐 - 购物商城</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 主导航栏样式 */
        .main-nav {
            background: #ff3c3c;
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            color: #fff;
            font-size: 32px;
            text-decoration: none;
            font-weight: bold;
        }

        .search-box {
            display: flex;
            flex: 1;
            max-width: 700px;
            margin: 0 20px;
        }

        .search-box input {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
        }

        .search-box button {
            padding: 12px 25px;
            background: #ff6666;
            border: none;
            color: white;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 16px;
        }

        /* 顶部导航栏样式 */
        .top-bar {
            background: #f5f5f5;
            padding: 8px 0;
            border-bottom: 1px solid #e5e5e5;
        }

        .top-bar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .top-links a {
            color: #666;
            text-decoration: none;
            margin-left: 20px;
            font-size: 16px;
        }

        /* 轮播图样式 */
        .slider {
            margin: 20px 0;
            position: relative;
            height: 600px;
            overflow: hidden;
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .slide.active {
            opacity: 1;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slide a {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* 轮播图按钮样式 */
        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 16px 12px;
            border: none;
            cursor: pointer;
            font-size: 18px;
            transition: background 0.3s;
        }

        .slider-btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .prev {
            left: 10px;
            border-radius: 0 3px 3px 0;
        }

        .next {
            right: 10px;
            border-radius: 3px 0 0 3px;
        }

        /* 轮播图指示器样式 */
        .slider-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .dot {
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.3s;
        }

        .dot.active {
            background: white;
        }

        /* 商品分类样式 */
        .categories {
            margin: 30px 0;
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            text-align: center;
        }

        .category-item {
            padding: 30px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .category-item i {
            font-size: 40px;
            color: #ff3c3c;
            margin-bottom: 15px;
        }

        .category-item h3 {
            font-size: 20px;
        }

        /* 商品列表样式 */
        .products {
            margin: 30px 0;
        }

        .section-title {
            font-size: 28px;
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ff3c3c;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            padding: 20px 0;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
        }
        
        .product-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }
        
        .product-link:hover {
            text-decoration: none;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            padding: 10px 15px;
        }
        
        .cart-btn {
            display: inline-block;
            width: 100%;
            background: #fff1f0;
            color: #ff4d4f;
            text-align: center;
            padding: 8px 15px;
            border-radius: 4px;
            text-decoration: none;
            transition: all 0.3s;
            border: 1px solid #ff4d4f;
            cursor: pointer;
        }
        
        .cart-btn:hover {
            background: #ffd4d4;
        }
        
        .buy-btn {
            display: inline-block;
            width: 100%;
            background: #ff4d4f;
            color: white;
            text-align: center;
            padding: 8px 15px;
            border-radius: 4px;
            text-decoration: none;
            transition: background 0.3s;
            border: none;
            cursor: pointer;
        }
        
        .buy-btn:hover {
            background: #ff6b6b;
        }

        /* 商品图片容器 */
        .product-image {
            position: relative;
            width: 100%;
            height: 280px;
            overflow: hidden;
            background: #f8f8f8;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .product-card:hover .product-image img {
            transform: scale(1.08);
        }

        /* 商品信息样式 */
        .product-info {
            padding: 20px;
        }

        .product-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            height: 44px;
            line-height: 22px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .price {
            font-size: 24px;
            font-weight: bold;
            color: #ff4d4f;
            margin-bottom: 10px;
        }

        .price::before {
            content: "¥";
            font-size: 16px;
            margin-right: 2px;
        }

        .brand {
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .brand::before {
            content: "品牌：";
            color: #999;
        }

        .stock {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .stock::before {
            content: "库存：";
            color: #999;
        }

        /* 购买按钮样式 */
        .buy-btn {
            width: 100%;
            padding: 12px 0;
            background: linear-gradient(45deg, #ff4d4f, #ff7875);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .buy-btn:hover {
            background: linear-gradient(45deg, #ff7875, #ff9c9d);
            transform: translateY(-2px);
        }

        /* 分类标题样式 */
        .section-title {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin: 40px 0 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #ff4d4f;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100px;
            height: 2px;
            background: #ff4d4f;
        }

        /* 商品分类图标样式优化 */
        .category-grid {
            margin: 30px 0;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }

        .category-item {
            background: white;
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .category-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        }

        .category-item i {
            font-size: 36px;
            color: #ff4d4f;
            margin-bottom: 15px;
            transition: transform 0.3s ease;
        }

        .category-item:hover i {
            transform: scale(1.1);
        }

        .category-item h3 {
            font-size: 16px;
            color: #333;
            margin: 0;
        }

        .buy-button {
            width: 100%;
            padding: 15px;
            background: #ff3c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .buy-button:hover {
            background: #ff6666;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(255, 60, 60, 0.3);
        }

        .buy-button i {
            font-size: 20px;
        }

        /* 页脚样式 */
        .footer {
            background: #333;
            color: #fff;
            padding: 40px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .footer-section h3 {
            margin-bottom: 20px;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 10px;
        }

        .footer-section ul li a {
            color: #ccc;
            text-decoration: none;
        }

        .footer-bottom {
            margin-top: 30px;
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #444;
        }


        .top-links a.my-account {
            color: #ff4d4f;
            font-weight: bold;
        }

        .top-links a.my-account:hover {
            color: #ff6b6b;

            .section {
                margin: 30px 0;
            }

            .section-title {
                font-size: 24px;
                color: #333;
                margin-bottom: 20px;
                padding-left: 10px;
                border-left: 4px solid #ff4d4f;
            }

            .product-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 20px;
            }

            .product-card {
                background: white;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s ease;
            }

            .product-card:hover {
                transform: translateY(-5px);
            }

            .product-image {
                position: relative;
                height: 200px;
            }

            .product-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .discount-tag, .new-tag, .hot-tag {
                position: absolute;
                top: 10px;
                right: 10px;
                padding: 4px 8px;
                border-radius: 4px;
                color: white;
                font-size: 12px;
            }

            .discount-tag {
                background: #ff4d4f;
            }

            .new-tag {
                background: #52c41a;
            }

            .hot-tag {
                background: #fa8c16;
            }

            .product-info {
                padding: 15px;
            }

            .product-name {
                font-size: 16px;
                color: #333;
                margin-bottom: 10px;
                height: 44px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .price-info {
                margin-bottom: 10px;
            }

            .current-price {
                color: #ff4d4f;
                font-size: 20px;
                font-weight: bold;
            }

            .original-price {
                color: #999;
                font-size: 14px;
                text-decoration: line-through;
                margin-left: 8px;
            }

            .tags {
                margin-bottom: 10px;
            }

            .tag {
                display: inline-block;
                padding: 2px 6px;
                border-radius: 2px;
                background: #fff0f0;
                color: #ff4d4f;
                font-size: 12px;
                margin-right: 5px;
            }

            .buy-btn {
                width: 100%;
                padding: 8px 0;
                background: #ff4d4f;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: background 0.3s ease;
            }

            .buy-btn:hover {
                background: #ff6b6b;
            }

            .coupon-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }

            .coupon-card {
                background: linear-gradient(45deg, #ff4d4f, #ff7875);
                padding: 20px;
                border-radius: 8px;
                color: white;
                text-align: center;
            }

            .coupon-amount {
                font-size: 32px;
                font-weight: bold;
                margin-bottom: 10px;
            }

            .coupon-desc {
                font-size: 14px;
                margin-bottom: 15px;
            }

            .get-coupon-btn {
                background: white;
                color: #ff4d4f;
                border: none;
                padding: 8px 20px;
                border-radius: 20px;
                cursor: pointer;
                transition: transform 0.3s ease;
            }

            .get-coupon-btn:hover {
                transform: scale(1.05);
            }
        }

        /* 商品网格布局 */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            padding: 20px 0;
        }

        /* 商品卡片样式 */
        .product-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }

        /* 商品图片容器 */
        .product-image {
            position: relative;
            width: 100%;
            height: 280px;
            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        /* 商品信息样式 */
        .product-info {
            padding: 20px;
        }

        .product-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #333;
        }

        .price {
            font-size: 24px;
            color: #ff4d4f;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .brand, .stock {
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
        }

        /* 购买按钮样式 */
        .buy-button {
            display: block;
            width: 100%;
            padding: 12px 0;
            background: #ff4d4f;
            color: white;
            text-align: center;
            border: none;
            border-radius: 6px;
            text-decoration: none;
            transition: background 0.3s ease;
        }

        .buy-button:hover {
            background: #ff6b6b;
        }

        .header {
            background-color: #ff4d4f;
            padding: 15px 0;
            color: white;
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .user-links {
            display: flex;
            gap: 20px;
        }
        
        .user-links a {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .user-links a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .user-links i {
            font-size: 16px;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .user-dropdown {
            position: relative;
            display: inline-block;
        }
        
        .user-name {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 4px;
            color: white;
        }
        
        .user-name:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            min-width: 160px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-radius: 4px;
            z-index: 1000;
        }
        
        .user-dropdown:hover .dropdown-content {
            display: block;
        }
        
        .dropdown-content a {
            color: #666;
            padding: 10px 15px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .dropdown-content a:hover {
            background-color: #f5f5f5;
            color: #ff4d4f;
        }
        
        .dropdown-divider {
            height: 1px;
            background-color: #eee;
            margin: 5px 0;
        }
    </style>
    <script>
        // 加入购物车功能
        function addToCart(productId) {
            // 检查用户是否登录
            <% if (session.getAttribute("userId") == null) { %>
                alert('请先登录后再加入购物车！');
                window.location.href = 'login.jsp';
                return;
            <% } %>
            
            fetch('cart/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    productId: productId,
                    quantity: 1
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('已添加到购物��！');
                } else {
                    alert(data.message || '添加失败，请重试');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('添加失败，请重试');
            });
        }

        // 立即购买功能
        function buyNow(productId, productName, price, discount) {
            // 检查用户是否登录
            <% if (session.getAttribute("userId") == null) { %>
                alert('请先登录后再购买！');
                window.location.href = 'login.jsp';
                return;
            <% } %>
            
            // 创建订单对象
            const orderData = {
                productId: productId,
                productName: productName,
                quantity: 1,
                price: price,
                discount: discount,
                totalAmount: price * discount
            };
            
            // 将订单数据存储到sessionStorage
            sessionStorage.setItem('orderData', JSON.stringify(orderData));
            
            // 跳转到支付页面
            window.location.href = 'payment.jsp';
        }
    </script>
</head>
<body>
    <!-- 主导航栏 -->
    <nav class="main-nav">
        <div class="container">
            <div class="nav-content">
                <a href="#" class="logo">淘乐乐</a>
                <div class="search-box">
                    <input type="text" placeholder="搜索你喜欢的商品...">
                    <button><i class="fas fa-search"></i> 搜索</button>
                </div>
                <div class="nav-right">
                    <div class="cart">
                        <a href="cart.jsp" style="color: white; text-decoration: none;">
                            <i class="fas fa-shopping-cart"></i> 购物车
                        </a>
                    </div>
                    <div class="user-menu">
                        <% if (session.getAttribute("userId") != null) { %>
                            <div class="user-dropdown">
                                <span class="user-name">
                                    <i class="fas fa-user"></i>
                                    ${sessionScope.username}
                                    <i class="fas fa-angle-down"></i>
                                </span>
                                <div class="dropdown-content">
                                    <a href="profile.jsp">
                                        <i class="fas fa-user-circle"></i>
                                        我的淘乐乐
                                    </a>
                                    <a href="my-orders.jsp">
                                        <i class="fas fa-shopping-bag"></i>
                                        我的订单
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="logout">
                                        <i class="fas fa-sign-out-alt"></i>
                                        退出登录
                                    </a>
                                </div>
                            </div>
                        <% } else { %>
                            <a href="login.jsp" style="color: white; text-decoration: none;">
                                <i class="fas fa-user"></i> 登录/注册
                            </a>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 顶部导航栏 -->
    <div class="top-bar">
        <div class="container">
            <div class="top-bar-content">
                <div class="top-links">
                    <c:choose>
                        <c:when test="${not empty sessionScope.userId}">
                            <span>欢迎，${sessionScope.username}</span>
                            <a href="logout">退出登录</a>
                        </c:when>
                        <c:otherwise>
                            <a href="login.jsp">请登录</a>
                            <a href="register.jsp">免费注册</a>
                        </c:otherwise>
                    </c:choose>
                </div>
                <div class="top-links">
                    <a href="my-orders.jsp" class="my-account"><i class="fas fa-user"></i> 我的淘乐乐</a>
                    <a href="cart.jsp"><i class="fas fa-shopping-cart"></i> 购物车</a>
                    <a href="#"><i class="fas fa-heart"></i> 收藏夹</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="container">
        <div class="slider">
            <div class="slide active">
                <a href="${pageContext.request.contextPath}/activity?id=1">
                    <img src="${pageContext.request.contextPath}/images/1.jpg" alt="双十二年终盛典">
                </a>
            </div>
            <div class="slide">
                <a href="${pageContext.request.contextPath}/activity?id=2">
                    <img src="${pageContext.request.contextPath}/images/2.jpg" alt="新品首发特惠">
                </a>
            </div>
            <div class="slide">
                <a href="${pageContext.request.contextPath}/activity?id=3">
                    <img src="${pageContext.request.contextPath}/images/3.jpg" alt="限时抢购活动">
                </a>
            </div>
            <div class="slide">
                <a href="${pageContext.request.contextPath}/activity?id=4">
                    <img src="${pageContext.request.contextPath}/images/4.jpg" alt="品牌特卖会">
                </a>
            </div>
            <!-- 轮播图控制按钮 -->
            <button class="slider-btn prev" onclick="changeSlide(-1)">❮</button>
            <button class="slider-btn next" onclick="changeSlide(1)">❯</button>
            <!-- 轮播图指示器 -->
            <div class="slider-dots">
                <span class="dot active" onclick="showSlide(0)"></span>
                <span class="dot" onclick="showSlide(1)"></span>
                <span class="dot" onclick="showSlide(2)"></span>
                <span class="dot" onclick="showSlide(3)"></span>
            </div>
        </div>
    </div>

    <!-- 商品分类 -->
    <div class="container">
        <div class="categories">
            <div class="category-grid">
                <div class="category-item">
                    <a href="${pageContext.request.contextPath}/category?id=1" class="category-item ${currentCategory == 1 ? 'active' : ''}">
                        <i class="fas fa-mobile-alt"></i>
                        <h3>手机数码</h3>
                    </a>
                </div>
                <a href="${pageContext.request.contextPath}/category?id=2" 
                   class="category-item ${currentCategory == 2 ? 'active' : ''}">
                    <i class="fas fa-tshirt"></i>
                    <h3>服装服饰</h3>
                </a>
                <a href="${pageContext.request.contextPath}/category?id=3" 
                   class="category-item ${currentCategory == 3 ? 'active' : ''}">
                    <i class="fas fa-laptop"></i>
                    <h3>电脑办公</h3>
                </a>
                <a href="${pageContext.request.contextPath}/category?id=4" 
                   class="category-item ${currentCategory == 4 ? 'active' : ''}">
                    <i class="fas fa-home"></i>
                    <h3>家居家装</h3>
                </a>
                <a href="${pageContext.request.contextPath}/category?id=5" 
                   class="category-item ${currentCategory == 5 ? 'active' : ''}">
                    <i class="fas fa-utensils"></i>
                    <h3>食品生鲜</h3>
                </a>
            </div>
        </div>

        <!-- 商品列表 -->
        <div class="products">
            <h2 class="section-title">
                ${empty categoryName ? '热门商品' : categoryName}
            </h2>
            <div class="product-grid">
                <c:forEach var="product" items="${products}">
                    <div class="product-card">
                        <a href="product?id=${product.productId}" class="product-link">
                            <div class="product-image">
                                <img src="${pageContext.request.contextPath}/images/${product.image}" alt="${product.name}">
                            </div>
                            <div class="product-info">
                                <h3 class="product-name">${product.name}</h3>
                                <div class="price">
                                    ¥<fmt:formatNumber value="${product.price}" pattern="#.00"/>
                                </div>
                            </div>
                        </a>
                        <div class="button-group">
                            <button onclick="addToCart(${product.productId})" class="cart-btn">加入购物车</button>
                            <button onclick="buyNow(${product.productId}, '${product.name}', ${product.price}, 1)" class="buy-btn">立即购买</button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>

        <!-- 如果没有商品，显示提示信息 -->
        <c:if test="${empty products}">
            <div class="no-products" style="text-align: center; padding: 50px 0;">
                <i class="fas fa-box-open" style="font-size: 48px; color: #ccc;"></i>
                <p style="margin-top: 20px; color: #666;">暂无商品</p>
            </div>
        </c:if>
    </div>

    <!-- 商品展示部分 -->
    <div class="container">
        <!-- 新品首发 -->
        <div class="section">
            <h2 class="section-title">新品首发</h2>
            <div class="product-grid">
                <c:forEach var="product" items="${products}" begin="0" end="3">
                    <div class="product-card">
                        <!-- 商品图片 -->
                        <div class="product-image">
                            <img src="${pageContext.request.contextPath}/images/${product.image}" alt="${product.name}">
                            <span class="discount-tag">5折</span>
                        </div>
                        <!-- 商品信息 -->
                        <div class="product-info">
                            <h3 class="product-name">${product.name}</h3>
                            <div class="price-info">
                                <span class="current-price">¥${product.price}</span>
                                <span class="original-price">¥${product.price * 2}</span>
                            </div>

                            <div class="price">
                                ¥${product.price}
                                <small>¥${product.originalPrice}</small>
                            </div>
                            <button class="buy-button" onclick="window.location.href='payment.jsp?price=${product.price}'">
                                <i class="fas fa-shopping-cart"></i>
                            </button>
                            <button class="buy-btn" onclick="location.href='product-detail?id=${product.id}'">
                                立即购买
                            </button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>



        <!-- 热卖推荐 -->
        <div class="section">
            <h2 class="section-title">热卖推荐</h2>
            <div class="product-grid">
                <c:forEach var="product" items="${products}" begin="0" end="1">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="${pageContext.request.contextPath}/images/${product.image}" alt="${product.name}">
                            <span class="hot-tag">热卖</span>
                        </div>
                        <div class="product-info">
                            <h3 class="product-name">${product.name}</h3>
                            <div class="price-info">
                                <span class="current-price">¥${product.price}</span>
                                <span class="original-price">¥${product.price * 1.2}</span>
                            </div>
                            <div class="tags">
                                <span class="tag">热卖爆款</span>
                                <span class="tag">限时优惠</span>
                            </div>
                            <button class="buy-btn" onclick="location.href='product-detail?id=${product.id}'">
                                立即购买
                            </button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>


    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <ul>
                        <li><a href="#">公司简介</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">招贤纳士</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>客户服务</h3>
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">售后服</a></li>
                        <li><a href="#">配送服务</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>支付方式</h3>
                    <ul>
                        <li><a href="#">在线支付</a></li>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">分期付款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <ul>
                        <li><a href="#"><i class="fab fa-weixin"></i> 微信</a></li>
                        <li><a href="#"><i class="fab fa-weibo"></i> 微博</a></li>
                        <li><a href="#"><i class="fab fa-qq"></i> QQ</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2024 淘乐乐商城 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        let currentSlide = 0;
        let slideInterval;

        function showSlide(n) {
            const slides = document.querySelectorAll('.slide');
            const dots = document.querySelectorAll('.dot');
            
            // 移除所有动状态
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            // 计算实际索引
            currentSlide = (n + slides.length) % slides.length;
            
            // 添加活动状态
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }

        function changeSlide(direction) {
            showSlide(currentSlide + direction);
            resetSlideInterval();
        }

        function resetSlideInterval() {
            clearInterval(slideInterval);
            slideInterval = setInterval(() => changeSlide(1), 3000);
        }

        // 始化轮播
        resetSlideInterval();
    </script>

    <!-- 在页面顶部添加调试信息 -->
    <c:if test="${not empty currentCategory}">
        <div style="display:none;">
            当前分类ID: ${currentCategory}<br>
            分类名称: ${categoryName}<br>
            商品数量: ${products.size()}
        </div>
    </c:if>
</body>
</html> 